<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin:0;padding:0;}
			body{overflow:hidden;}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
	</body>
</html>
<script type="text/javascript">
	var Sprite = function(type , artist , behaviors){
		var DEFAULT_WIDTH = 10,
			DEFAULT_HEIGHT = 10,
			DEFAULT_OPACITY = 1.0;
		
		this.type = type;
		this.artist = artist;
		this.behaviors = behaviors || [];
		
		this.hOffset = 0;		//水平偏移量
		this.left = 0;
		this.top = 0;
		this.width = DEFAULT_WIDTH;
		this.height = DEFAULT_HEIGHT;
		this.velocityX = 0;
		this.velocityY = 0;
		this.opacity = DEFAULT_OPACITY;
		this.visible = true;
	}
	Sprite.prototype = {
		draw : function(context){
			context.save();
			context.globalAlpha = this.opacity;
			
			if(this.visible && this.artist){
				this.artist.draw(this, context);
			}
			context.restore();
		},
		undate : function(now , fps ,context , lastFrameTime){
			for(var i = 0;i<this.behaviors.length; i++){
				this.behaviors[i].execute(this,
										now ,
										fps , 
										context , 
										lastFrameTime);
			}
		}
	}
	
</script>